<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit" />
<title></title>
<style type="text/css">
body {
	font-size: 14px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		QueryString = {
			data : {},
			Initial : function() {
				var aPairs, aTmp;
				var queryString = new String(window.location.search);
				queryString = queryString.substr(1, queryString.length);
				aPairs = queryString.split("&");
				for (var i = 0; i < aPairs.length; i++) {
					aTmp = aPairs[i].split("=");
					this.data[aTmp[0]] = aTmp[1];
				}
			},
			GetValue : function(key) {
				return this.data[key];
			}
		}

		QueryString.Initial();
		var id = QueryString.GetValue("id");

		$.ajax({
			type : "post",
			dataType : "json",
			url : "${pageContext.request.contextPath}/GetUserThemeServlet",
			data : {
				id : id
			},
			cache : false,
			async : false,
			success : function(msg) {
				if (msg == null) {
					return;
				}

				var result = eval(msg);
				var curr = result[0];
				var top = result[1];

				$("#CreateDate").html(curr[0].createDate);
				$("#CreateUser").html("上传者 : " + curr[0].createUserName);
				$("#Title").html(curr[0].title);
				$("#Content").html(curr[0].content);
				$("#Video").attr("src", "http://121.199.9.105:8080" + curr[0].imagePath + curr[0].imageName);

				var html1 = "";
				var html2 = "";
				for (var i = 0; i < top.length; i++) {
					if (i != 0) {
						html1 += "<div style='float: left;width: 2%;'>&nbsp;</div>";
						html2 += "<div style='float: left;width: 2%;'>&nbsp;</div>";
					}

					html1 += "<div style='float: left;width: 32%;'>";
					html1 += "<video controls='controls' style='width: 100%;height: 180px;'>";
					html1 += "<source src='" + "http://121.199.9.105:8080" + curr[0].imagePath + curr[0].imageName + "' type='video/mp4' />";
					html1 += "Your browser does not support the video tag.";
					html1 += "</video>";
					html1 += "</div>";

					html2 += "<div style='float: left;width: 32%;'><a href='${pageContext.request.contextPath}/VideoPlay.jsp?id=" + top[i].id + "'>" + top[i].title + "</a></div>";
				}
				$("#Videos1").html(html1);
				$("#Videos2").html(html2);
			}
		});
	});
</script>
</head>
<body>
	<div>
		<div id="CreateDate" style="float: right;margin-left: 10px;font-weight: bold;"></div>
		<div id="CreateUser" style="float: right;color: red;"></div>
	</div>
	<div style="clear: both;padding-top: 10px;"></div>
	<div>
		<div id="Title" style="float: left;font-size: 16px;"></div>
	</div>
	<div style="clear: both;padding-top: 10px;"></div>
	<div id="Content"></div>
	<div style="background-color: black;height: 1px;width: 80%;text-align: center;margin-left: auto;margin-right: auto;margin-top: 10px;margin-bottom: 10px;"></div>
	<div style="margin-left: auto;margin-right: auto;">
		<video controls="controls" style="width: 100%;height: 180px;">
			<source id="Video" src="" type="video/mp4" />
			Your browser does not support the video tag.
		</video>
	</div>
	<div style="text-align: center;margin-top: 20px;font-size: 16px;">向您推荐</div>
	<div style="background-color: black;height: 1px;width: 80%;text-align: center;margin-left: auto;margin-right: auto;margin-top: 10px;margin-bottom: 10px;"></div>
	<div id="Videos1"></div>
	<div style="clear: both;"></div>
	<div id="Videos2"></div>
</body>
</html>